<template>
  <section class="testimonials-one" id="strength">
    <div class="container">
      <div class="block-title text-center">
        <h2 class="block-title__title">师资力量 与 个人简介.</h2><!-- /.block-title__title -->
      </div><!-- /.block-title -->
      <div class="testimonials-one__carousel-outer">
        <div class="testimonials-one__carousel owl-carousel owl-theme">
          <div class="item" v-for="item in data">
            <div class="testimonials-one__single">
              <div class="testimonials-one__inner">
                <p>{{item.description}}</p>
                <h3>{{ item.teacherName }}</h3>
                <span v-for="tag in JSON.parse(item.researchDire)">{{tag}}</span>
                <img :src="item.avatar" alt="Awesome Image" style="width: 100px"/>
              </div><!-- /.testimonials-one__inner -->
            </div><!-- /.testimonials-one__single -->
          </div><!-- /.item -->
        </div><!-- /.testimonials-one__carousel -->
        <div class="testimonials-one__carousel__shape-one"></div><!-- /.testimonials-one__carousel__shape-one -->
        <div class="testimonials-one__carousel__shape-two"></div><!-- /.testimonials-one__carousel__shape-two -->
        <div class="testimonials-one__nav">
          <a class="testimonials-one__nav-left" href="#"><i class="dimon-icon-left-arrow"></i></a>
          <a class="testimonials-one__nav-right" href="#"><i class="dimon-icon-right-arrow"></i></a>
        </div><!-- /.testimonials-one__nav -->
      </div><!-- /.testimonials-one__carousel-outer -->
    </div><!-- /.container -->
  </section>
</template>

<script>
import apis from '../apis/apis';

export default {
  name: "Testimonial",
  data() {
    return {
      data: []
    }
  },
  methods: {
    getData() {
      apis.getTeacherData().then(res => {
        this.data = res.data
        this.$nextTick(() => {
          this.initTeacherInfo()
        })
      })
    },
    initTeacherInfo() {
      if ($('.testimonials-one__carousel').length) {
        $('.testimonials-one__carousel').owlCarousel({
          loop: true,
          margin: 0,
          nav: false,
          dots: false,
          autoWidth: false,
          autoplay: true,
          smartSpeed: 700,
          autoplayTimeout: 5000,
          autoplayHoverPause: true,
          items: 1
        });

        $('.testimonials-one__nav-left').on('click', function () {
          $('.testimonials-one__carousel').trigger('next.owl.carousel');
          return false;
        });
        $('.testimonials-one__nav-right').on('click', function () {
          $('.testimonials-one__carousel').trigger('prev.owl.carousel');
          return false;
        });
      }
    }
  },
}
</script>

<style scoped>

</style>
